<template>
  <v-container fluid class="fill-height pa-0 gradient-bg">
    <v-row align="center" justify="end" class="ma-0">
      <v-col cols="12" sm="8" md="5" lg="4" class="login-col">
        <v-card class="pa-6 login-card" elevation="10">
          <v-progress-linear
            v-if="isSubmitting"
            indeterminate
            color="primary"
            height="3"
            class="mb-4"
          />
          <div class="d-flex flex-column align-center mb-4">
            <v-img :src="logoUrl" max-width="144" class="mb-2" contain></v-img>
            <div class="login-title">Unified login platform</div>
          </div>

          <v-form @submit.prevent="onSubmit">
            <div class="body-title mb-2">User login</div>
            <v-text-field
              v-model.trim="form.username"
              label="Account"
              placeholder="Account"
              prepend-inner-icon="mdi-account"
              :disabled="isSubmitting"
              :error-messages="showUsernameError ? ['Please enter your username'] : []"
              outlined dense
            />
            <v-text-field
              v-model="form.password"
              label="Password"
              placeholder="Password"
              prepend-inner-icon="mdi-lock"
              :type="showPw ? 'text' : 'password'"
              :append-icon="showPw ? 'mdi-eye-off' : 'mdi-eye'"
              @click:append="showPw=!showPw"
              :disabled="isSubmitting"
              :error-messages="showPasswordError ? ['Please enter your password'] : []"
              outlined dense
            />
            <div class="d-flex align-center justify-space-between mt-n2 mb-1">
              <v-checkbox
                v-model="form.rememberMe"
                label="Remember pwd"
                :disabled="isSubmitting"
                hide-details
                class="mt-0"
              />
              <v-btn small text class="change-pwd" @click="onChangePwd">Change pwd</v-btn>
            </div>
            <v-btn :loading="isSubmitting" :disabled="!canSubmit" color="primary" dark block class="mt-4 login-btn" type="submit">
              Login
            </v-btn>
          </v-form>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { login } from '@/api/auth'
import logoPng from '@/assets/logo.png'
export default {
  name: 'Login',
  data() {
    return {
      logoUrl: logoPng,
      form: {
        username: '',
        password: '',
        rememberMe: false
      },
      isSubmitting: false,
      hasTriedSubmit: false,
      showPw: false
    }
  },
  computed: {
    canSubmit() {
      return this.form.username.trim().length > 0 && this.form.password.length > 0
    },
    showUsernameError() {
      return this.hasTriedSubmit && this.form.username.trim().length === 0
    },
    showPasswordError() {
      return this.hasTriedSubmit && this.form.password.length === 0
    }
  },
  methods: {
    async onSubmit() {
      this.hasTriedSubmit = true
      if (!this.canSubmit || this.isSubmitting) return

      try {
        this.isSubmitting = true
        const res = await login({ username: this.form.username, password: this.form.password })
        const token = res && (res.token || (res.data && res.data.token))
        if (token) {
          window.localStorage.setItem('token', token)
          const redirect = this.$route.query.redirect || '/main'
          this.$router.replace(redirect)
        } else {
          throw new Error('No token in response')
        }
      } catch (error) {
        // Here we can integrate real error notifications
        // eslint-disable-next-line no-console
        console.error('Login failed', error)
      } finally {
        this.isSubmitting = false
      }
    },
    onChangePwd() {
      const target = '/change-password'
      if (this.$router && this.$router.resolve && this.$router.resolve(target).resolved.matched.length) {
        this.$router.push(target)
      } else {
        // eslint-disable-next-line no-console
        console.info('Change password route not configured.')
      }
    }
  }
}
</script>

<style scoped>
.gradient-bg {
  background-image: url('~@/assets/login_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.login-col {
  margin-right: 100px;
}

.login-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.04);
  transition: box-shadow .25s ease, transform .25s ease;
}
.login-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.06);
}

.login-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(0,0,0,0.78);
}
.login-subtitle {
  font-size: 13px;
  color: rgba(0,0,0,0.54);
}

.body-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0,0,0,0.8);
}

/* Enhance input fields slightly (keeps Vuetify colors) */
::v-deep .v-text-field .v-input__control {
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
}
::v-deep .v-text-field--outlined fieldset {
  border-color: rgba(0,0,0,0.10) !important;
}
::v-deep .v-text-field input {
  letter-spacing: 0.2px;
}
::v-deep .v-input--is-focused .v-text-field--outlined fieldset {
  border-color: #83A37B !important;
}

.change-pwd {
  color: #517C49;
  text-transform: none;
  font-weight: 500;
}

.login-btn {
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
</style>


